/*
 * @Description: 生成档号弹窗
 * @Author: Rfan
 * @Date: 2022-07-14 15:21:21
 * @LastEditTime: 2022-07-14 15:28:21
 */

import { useEffect, useState } from 'react';
import { Button, Modal, Space, Steps } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import classNames from 'classnames/bind';
import { useBoxMgtContext } from '../../../../contexts/BoxMgtContext';
import type { FC } from 'react';
import type { ICommonDialog } from '@/interfaces/global';
import styles from '../../../../styles/autoFiling.module.scss';

const cx = classNames.bind(styles);
const { Step } = Steps;

interface IAutoFilingStateDialog extends ICommonDialog {}

const AutoFilingStateDialog: FC<IAutoFilingStateDialog> = (props) => {
  const { visible, onClose } = props;
  const { autoFiling } = useBoxMgtContext();

  const [tipsFlag, setTipsFlag] = useState(autoFiling.loading);

  const [current, setCurrent] = useState(autoFiling.loading ? 1 : 2);

  useEffect(() => {
    if (visible) {
      //
    }
  }, [visible]);

  useEffect(() => {
    setTipsFlag(autoFiling.loading);
    setCurrent(autoFiling.loading ? 1 : 2);
  }, [autoFiling]);

  const onCancel = () => {
    onClose();
  };

  return (
    <Modal
      destroyOnClose
      title={tipsFlag ? '生成档号中…' : '结果'}
      visible={visible}
      width={600}
      onCancel={() => {
        onCancel();
      }}
      footer={[
        <Button
          key="back"
          onClick={() => {
            onCancel();
          }}
        >
          取消
        </Button>
      ]}
    >
      <Steps current={current}>
        <Step title="数据校验" />
        <Step title="组卷中" />
        <Step title="结果" />
      </Steps>
      <div className={cx('step-container')}>
        {current === 1 && (
          <div className={cx('generate-info')}>
            <Space size="large">
              自动组卷中
              <LoadingOutlined />
            </Space>
          </div>
        )}
        {current === 2 && (
          <div className="generate-info">
            <span>{autoFiling.info.data ? '' : autoFiling.info.message}</span>
            {/* <div className="finish-info"> */}
            {/*  <p>生成条目统计</p> */}
            {/*  <p>案卷：100/100</p> */}
            {/*  <p>文件：200/200</p> */}
            {/*  <p>生产时间：34分钟</p> */}
            {/* </div> */}
          </div>
        )}
      </div>
    </Modal>
  );
};

export default AutoFilingStateDialog;
